import React, {useCallback} from "react"

import { useMobxStore } from '../hooks/useMobxStore'
import { observer } from "mobx-react";
import {AppStore} from '../store/appStore'

const Home2:React.FC = () => {
    const appStore: AppStore = useMobxStore('appStore')
    console.log(appStore);

    const onIncrease = useCallback(
        () => {
            appStore.increase()
        },
        [appStore.count],
    )
    const onReset = useCallback(
        () => {
            appStore.reset()
        },
        [appStore.count],
    )
    return (
        <div>
            <h3>{appStore.count}</h3>
            <h3>double{appStore.double}</h3>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onReset}>reset</button>
        </div>
    )
}

export default observer(Home2)